<template>
  <nav-bar title="更改手机号" left-text="" left-arrow @click-left="onClickLeft" />
<div class="box">
  <p>当前手机号：195****8584</p>
  <input type="text" placeholder="请输入新手机号">
  <input type="text" placeholder="验证码"><button>发送验证码</button>
</div>
<button class="btn">确认修改</button>
</template><script setup>
import { useRouter } from "vue-router";

import { NavBar } from 'vant';
const onClickLeft=()=>{
router.go(-1)
};
const router = useRouter();
</script>
<style scoped>
body{
  background-color: rgb(240,243,248);
}
.box{
  padding: 0 10px;
  border-top: 5px solid #f0f0f0;
  font-size: .8rem;
  position: relative;
}
.box p{
  width: 100%;
  height: 2.1875rem;
  border-bottom: 1px solid #f0f0f0;
  line-height: 2.1875rem;
}
.box input{
  width: 100%;
  border: none;
  height: 2.1875rem;
}
.box input:nth-child(3){
  border-bottom: .0625rem solid #f0f0f0;
}
.btn{
  box-sizing: border-box;
  margin: .9375rem 1.125rem;
  width: 90%;
  height: 1.5rem;
  border: none;
  background-color: var(--main-color);
  border-radius: .9125rem;
  color: white;
  font-size: .6rem;
  box-shadow: 0px 1px 3px rgb(212, 212, 212);

}
.box button {
  width: 4.8125rem;
  height: 1.5625rem;
  float: right;
 position: absolute;
 bottom: .4375rem;
 right: .75rem;
 border: none;
 color: rgb(115,115,115);
 background-color: rgb(228,231,232);
 box-shadow: 0px 1px 2px gray;
}
</style>